<template>
  <div style="display: flex; height: 1080px">
    <div style="width: 80%">
      <div style="height: 25%; display: flex; margin-bottom: 5px" class="boxStyle">
        <div style="width: 50%" class="boxStyle">
          <div id="echarts-one" style="width: 100%; height: 100%"></div>
        </div>
        <div style="width: 50%; margin-left: 5px" class="boxStyle">
          <div id="echarts-tow" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div style="height: 30%; margin-bottom: 5px" class="boxStyle">
        <div id="echarts-four" style="width: 100%; height: 100%"></div>
      </div>
      <div style="height: 45%" class="boxStyle">
        <div id="echarts-three" style="width: 100%; height: 100%"></div>
      </div>
    </div>
    <div
      style="width: 20%; margin-left: 5px; display: flow-root"
      class="panelContent boxStyle"
    >
      <div
        style="width: 100%; height: 30%; margin-bottom: 5px; overflow-y: auto"
        class="boxStyle"
      >
        <div class="features">
          <el-icon color="red"><StarFilled /></el-icon>特色功能
        </div>
        <div style="margin: 10px 10px">
          <el-collapse accordion>
            <el-collapse-item title="数据行权限" name="1">
              <div style="text-align: justify">
                可以根据角色、部门、人员、数据状态等等条件设置使用人员的查看数据权限。
              </div>
            </el-collapse-item>
            <el-collapse-item title="数据列权限" name="2">
              <div style="text-align: justify">
                可以根据角色、部门、人员、数据状态等等条件设置使用人员的查看数据列权限。
              </div>
            </el-collapse-item>
            <el-collapse-item title="数据按钮权限" name="4">
              <div style="text-align: justify">
                可以根据角色、部门、人员、数据状态等等条件设置使用人员的数据按钮操作限。
              </div>
            </el-collapse-item>
            <el-collapse-item title="按钮权限" name="3">
              <div style="text-align: justify">
                可以根据角色、部门、人员、数据状态等等条件设置使用人员的按钮权限。
              </div>
            </el-collapse-item>

            <!-- <el-collapse-item title="可视化表单设计" name="5">
              <div style="text-align: justify">动态设计表单</div>
            </el-collapse-item>
            <el-collapse-item title="可视化流程设计" name="6">
              <div style="text-align: justify">动态设计流程</div>
            </el-collapse-item> -->
          </el-collapse>
        </div>
      </div>
      <div style="width: 100%; height: 32%" class="boxStyle">
        <div class="features">
          <el-icon><InfoFilled /></el-icon>系统文章
        </div>
        <div style="margin: 10px 10px">
          <el-scrollbar height="250px">
            <!-- <p
              v-for="item in WeChatArticleList"
              :key="item.key"
              class="scrollbar-demo-item"
            >
              <el-link :href="item.key" target="_blank" type="primary">{{
                item.value
              }}</el-link>
            </p> -->
            <p class="scrollbar-demo-item">
              <el-link
                href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzkyNDc0Nzk4OA==&action=getalbum&album_id=3632811571832717321#wechat_redirect"
                target="_blank"
                type="primary"
                >《OverallAuth统一权限分发中心》从0到1搭建过程</el-link
              >
            </p>
            <p class="scrollbar-demo-item">
              <el-link
                href=" https://mp.weixin.qq.com/s/9-YeaCNiFjZKAj3HDikUlQ"
                target="_blank"
                type="primary"
                >《功能级权限使用说明》</el-link
              >
            </p>
          </el-scrollbar>
        </div>
      </div>
      <div style="width: 100%; height: 28%; text-align: left" class="boxStyle">
        <div class="features">
          <el-icon color="green"><UserFilled /></el-icon>关于作者
        </div>
        <div style="margin: 10px 10px; display: flex">
          <div class="boxStyle">
            <div class="aboutAuthor">
              <img src="../../assets/picture/QQ.png" /><el-text
                type="primary"
                style="margin-left: 5px"
                >QQ群:801913255</el-text
              >
            </div>
            <img style="width: 100%" src="../../assets/picture/QQ群.png" />
          </div>
          <div class="boxStyle" style="margin-left: 5px">
            <div class="aboutAuthor">
              <img src="../../assets/picture/微信.png" /><el-text
                type="success"
                style="margin-left: 5px"
                >公众号:不只是码农</el-text
              >
            </div>
            <img style="width: 100%" src="../../assets/picture/公众号.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { echartsFour, echartsOne, echartsThree, echartsTWO } from "@/api/panel/echarts";
import * as echarts from "echarts";
import { defineComponent, onMounted } from "vue";
import chinaJson from "@/api/panel/china.json";
import { WeChatArticleList } from "@/api/panel";
export default defineComponent({
  setup() {
    onMounted(() => {
      GetEchartsOneData();
      GetEchartsTwoData();
      GetEchartsThreeData();
      GetEchartsFourData();
    });

    //六芒星图
    function GetEchartsOneData() {
      var myChart = echarts.init(document.getElementById("echarts-one"));
      myChart.setOption(echartsOne);
      resizeEchart(myChart);
    }

    //南丁格尔玫瑰图
    function GetEchartsTwoData() {
      var myChart = echarts.init(document.getElementById("echarts-tow"));
      myChart.setOption(echartsTWO);
      resizeEchart(myChart);
    }

    //中国地图
    function GetEchartsThreeData() {
      var myChart = echarts.init(document.getElementById("echarts-three"));
      echarts.registerMap("china", chinaJson as any); //注册可用的地图
      myChart.setOption(echartsThree);
      resizeEchart(myChart);
    }

    //堆叠图
    function GetEchartsFourData() {
      var myChart = echarts.init(document.getElementById("echarts-four"));
      myChart.setOption(echartsFour);
      resizeEchart(myChart);
    }

    //图标兼容性调整
    function resizeEchart(myChart: any) {
      //监听窗口大小变化(适用于一个页面多个图形)
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }

    return { WeChatArticleList };
  },
  components: {},
});
</script>
<style scoped>
.panelContent {
  font-size: 12px;
  justify-content: right;
  align-items: center;
}
.boxStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  /* border-radius: 4px; */
  position: relative;
}
.features {
  height: 50px;
  font-size: 18px;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #409eff;
}
.aboutAuthor {
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: center;
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
}
.scrollbar-demo-item {
  display: flex;
  /* align-items: center;
  justify-content: center; */
  height: 50px;
  margin: 5px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

/* @keyframes clippath {
      0%,
      100% {
        clip-path: inset(0 0 95% 0);
      }
      25% {
        clip-path: inset(0 95% 0 0);
      }
      50% {
        clip-path: inset(95% 0 0 0);
      }
      75% {
        clip-path: inset(0 0 0 95%);
      }}

  .boxStyle::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffe70b, #bfff7e, #75fb03);
    padding: 3px;
    mask: linear-gradient(#fff 0 100%) content-box, linear-gradient(#fff 0 100%);
    mask-composite: exclude;
    position: absolute;
    top: -3px;
    left: -3px;
    animation: clippath 3s infinite linear;
  } */
</style>
